export function Message({
    duration=2000,
    content="",
    type="common"
}){
    /**
     * @param {common|error|success|warn} type 提示类型 
     */
    let colorRef={
        common:'#3491FA',
        error:'#F53F3F',
        success:'#23C343',
        warn:'#FF7D00'
    }
    let messageDiv=document.createElement("div")
    const divStyle=`
        position:absolute;
        left:50%;
        background-color:${colorRef[type]};
        color:white;
        top:${(window.messageNumber || 0)*30+((window.messageNumber || 0)+1)*5}px;
        height:30px;
        line-height:30px;
        text-align:center;
        border-radius:15px;
        padding-left:8px;
        padding-right:8px;
        transform:translateY(100%) translateX(-50%);
        opacity:0.5;
        transition:.2s;
        min-width:150px;
        z-index:10000000000
    `
    messageDiv.style=divStyle
    messageDiv.textContent=content
    document.body.appendChild(messageDiv)
    if(!window.messageNumber){
        window.messageNumber=1
    }else{
        window.messageNumber+=1
    }
    setTimeout(()=>{    
        messageDiv.style.transform="translateY(0) translateX(-50%)"
        messageDiv.style.opacity="1"
    },200)
    if(duration<500){
        duration=500
    }
    
    setTimeout(()=>{
        messageDiv.remove()
        window.messageNumber-=1
    },duration)
}